import React, {FC, useState} from "react";


import styles from "./QuestionCard.module.scss";
import {Button, Divider, message, Modal, Popconfirm, Space, Tag} from "antd";
import {CopyOutlined, DeleteFilled, EditOutlined, LineChartOutlined, StarOutlined} from "@ant-design/icons";
import {Link, useNavigate} from "react-router-dom";
import {useRequest} from "ahooks";
import {duplicateQuestionService, updateQuestionService} from "../services/question";

type PropsType = {
    _id: string
    title: string
    isStar: boolean
    answerCount: number
    isPublished: boolean
    createAt: string

}

const QuestionCard: FC<PropsType> = (props: PropsType) => {
    const {_id, title, createAt, answerCount, isPublished, isStar} = props
    const nav = useNavigate();

    const [isStarState, setIsStareState] = useState(isStar)

    const {loading: changStarLoading, run: changeStar} = useRequest(async () => {
        await updateQuestionService(_id, {isStar: !isStarState})
    }, {
        manual: true,
        onSuccess() {
            setIsStareState(!isStarState)
            message.success("修改成功")
        }
    })


    const {loading: duplicateLoading, run: duplicate} = useRequest(async () => {
        const data = await duplicateQuestionService(_id)
        return data
    }, {
        manual: true,
        onSuccess(result: any) {
            message.success("复制成功")
            nav(`/question/edit/${result.id}`)
        }
    })


    const [isDeletedState, setIsDeletedState] = useState(false)
    //删除
    const {loading: deleteLoading, run: deleteQuestionClick} = useRequest(async () => {
        await updateQuestionService(_id, {isDeleted: true})
    }, {
        manual: true,
        onSuccess() {
            message.success("删除成功")
            setIsDeletedState(true)
        }
    })

    function deleteQuestion() {
        Modal.confirm({
            title: '确定要删除该问卷吗？',
            content: '删除后，该问卷将无法再被访问',
            okText: '确定',
            cancelText: '取消',
            onOk() {
                deleteQuestionClick()
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }

    if (isDeletedState) {
        return null
    }
    return (
        <>

            <div className={styles.container}>
                <div className={styles.title}>
                    <div className={styles.left}>
                        <Link to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}>
                            <Space>
                                {isStar ? <StarOutlined style={{color: "red"}}/> : <StarOutlined/>}
                                {title}</Space>
                        </Link>
                    </div>
                    <div className={styles.right}>
                        <Space>
                            {isPublished ? <Tag color="processing">已发布</Tag> :
                                <Tag>未发布</Tag>}
                            <span>答卷：{answerCount}</span>
                            {createAt}
                        </Space>
                    </div>
                </div>
                <Divider style={{margin: "12px"}}></Divider>
                <div className={styles['button-container']}>
                    <div className={styles.left}>
                        <Space>
                            <Button icon={<EditOutlined/>} type="text" size="small"
                                    onClick={() => {
                                        nav(`/question/edit/${_id}`)
                                    }}
                            >编辑</Button>
                            <Button icon={<LineChartOutlined/>} type="text" size="small"
                                    onClick={() => {
                                        nav(`/question/stat/${_id}`)
                                    }}
                                    disabled={!isPublished}
                            >数据统计</Button>
                        </Space>


                    </div>
                    <div className={styles.right}>
                        <Space>
                            <Button onClick={() => changeStar()}
                                    loading={changStarLoading}
                                    type="text" icon={<StarOutlined/>}>{
                                isStarState ? "取消标星" : "标星"
                            }</Button>
                            <Popconfirm
                                placement="topLeft"
                                title="确定要复制该问卷吗？"
                                okText="Yes"
                                cancelText="No"
                                onConfirm={duplicate}
                            >
                                <Button loading={duplicateLoading} type="text" icon={<CopyOutlined/>}>复制</Button>
                            </Popconfirm>
                            <Button type="text" disabled={deleteLoading} icon={<DeleteFilled/>}
                                    onClick={deleteQuestion}>删除</Button>
                        </Space>
                    </div>
                </div>
            </div>

        </>
    )

}
export default QuestionCard;
